<template>
  <view class="cart">
    <view class="cart-list" >
      <view class="cart-item" v-for="(item,index) in cartList" :key="item.goods_name"> 
        <view class="cart-checkbox">
          <checkbox-group @change="checkbox(index)">
            <checkbox :checked="item.checkbox" ></checkbox>
          </checkbox-group>
        </view>
        <view class="cart-img">
          <image :src="item.goods_small_logo"></image>
        </view>
        <view class="cart-detail">
          <view class="cart-name u-line-2">{{item.goods_name}}</view>
          <view class="cart-price">
            <view class="cart-UnitPrice">￥{{item.goods_price}}</view>
            <view class="cart-priceNum">
              <view class="cart-priceNum" @click="onNumber(-1,index)">-</view>
              <view class="cart-value">{{item.nums}}</view>
              <view class="cart-priceNum" @click="onNumber(+1,index)">+</view>
            </view>
          </view>
        </view>
      </view>
      
    </view>
    <view class="cart-footer">
      <checkbox-group @change="onchange">
        <checkbox :checked="allcheckbox">全选</checkbox>
      </checkbox-group>
      <view class="cart-footer-price">总价: {{onTotPrice}}</view>
      <view class="cart-footer-btn" @click="GoPay">
        去结算({{oncheckBoxNum}})
      </view>
    </view>
  </view>
</template>

<script>
import {mapState,mapGetters} from "vuex"
export default {
  computed:{
    ...mapState(["cartList"]),
    ...mapGetters(["onTotPrice","oncheckBoxNum"]),
    allcheckbox(){
      return this.cartList.length&&this.cartList.every(item=>item.checkbox)
    }
  },
  data(){
    return{

    }
  },
  methods:{
    async onNumber(num,index){
      const cartList=this.cartList
      if(num===-1&&cartList[index].nums===1){
      const [err,result] =await uni.showModal({title: '提示',content: '是否确定要删除'});
        console.log(result);
        if(result.confirm){
          cartList.splice(index,1)
        }
      }else{
        cartList[index].nums+=num
      }
      this.$store.commit("setCartList",cartList)
    },
    checkbox(index){
      const cartList=this.cartList
      cartList[index].checkbox=!cartList[index].checkbox
      this.$store.commit("setCartList",cartList)
    },
    onchange(){
      const checked=!this.allcheckbox
      const cartList=this.cartList
      cartList.forEach(item=>item.checkbox=checked)
      this.$store.commit("setCartList",cartList)
    },
    GoPay(){
      if(this.oncheckBoxNum===0){
        uni.showToast({
          title: '未选择要结算的商品',
          icon: 'none',
        });
        return
      }
      uni.navigateTo({url:"/pages/pay/pay"})
    }
  },
  onLoad(){
  }
}
</script>

<style lang="scss">
.cart {
  padding-bottom: 83rpx;
  .cart-list {
    padding: 20rpx;
    .cart-item{
      display: flex;
      .cart-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cart-img {
        image {
          width: 191rpx;
          height: 191rpx;
        }
      }

      .cart-detail {
        flex:3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 20rpx;
        .cart-name {
          color: #666;
          font-size: 28rpx;
        }

        .cart-price {
          display: flex;
          justify-content: space-between;
          .cart-UnitPrice {
            color: #ff2d4a;
            font-size: 28rpx;
          }
          .cart-priceNum {
            display: flex;
            align-items: center;
            justify-content: center;
            .cart-priceNum {
              width: 36rpx;
              height: 36rpx;
              border: 1px solid #ccc;
              border-radius: 50%;
              color: #666;
              font-size: 28rpx;
            }
            .cart-value {
              padding:0 15rpx;
              font-size: 28rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
  .cart-footer {
    width: 100%;
    display: flex;
    height: 83rpx;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    background-color: #fff;
    padding:0 20rpx;
    font-size: 28rpx;
    .cart-footer-price {
      flex:1;
      margin-left: 20rpx;
    }
    .cart-footer-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding:0 20rpx;
      height: 52rpx;
      background-color: #ff2d4a;
      border: 1px solid #ccc;
      font-size: 22rpx;
      border-radius: 30rpx;
      color: #fff;
    }
  }
}
</style>